<template>
	<view>
		<view style='padding:15px;'>
			<u--form :model="formData" ref="form1">
				<u-form-item label="整改对象" prop="rectifyObjName" labelWidth='280'>
					<u--input v-model="formData.rectifyObjName" placeholder="请选择企业名称" readonly>
					</u--input>
				</u-form-item>
				<u-form-item label="检查日期" prop="rectifyInspDate" labelWidth='280'>
					<uni-datetime-picker type="datetime" v-model="formData.rectifyInspDate" @change="showSelect=false"
						:disabled="supervisionType.type=='view'" />
				</u-form-item>
				<u-form-item label="询查人员" prop="inspPerName" labelWidth='280'>
					<u--input v-model="formData.inspPerName" placeholder="请选择询查人员" readonly>
					</u--input>
				</u-form-item>
				<u-form-item label="整改内容" prop="rectifyContent" labelWidth='280'>
					<u--textarea v-model="formData.rectifyContent" placeholder="请输入整改内容" height='150'>
					</u--textarea>
				</u-form-item>
				<u-form-item label="整改截止日期" prop="rectifyEndDate" labelWidth='280'>
					<uni-datetime-picker type="datetime" v-model="formData.rectifyEndDate" />
				</u-form-item>
				<!-- 	<u-form-item label="整改通知书下发日期" prop="sendDate" labelWidth='280'>
					<u--input v-model="formData.sendDate" readonly>
					</u--input>
				</u-form-item> -->

				<u-form-item prop="note" label="备注" labelWidth='280'>
					<u--textarea v-model="formData.note" placeholder="请输入备注" height='100'>
					</u--textarea>
				</u-form-item>
				<u-form-item prop="file" borderBottom label="整改通知附件" labelWidth='280'>
					<view class="file-list clearfix">
						<view class="file-item" v-for="(item,index) in formData.files">
							<image class="file-img" :src="item.url" mode="aspectFit"
								@click="previewImage(item,index,2)">
							</image>
							<view class="file-del" @click="fileDel(index,2)"></view>
						</view>
						<view class="file-item file-upload-btn" @click="selectFile(2)"></view>
					</view>
				</u-form-item>

				<view class="" style="width: 100%;text-align: center;">
					<text type="primary" class="add" @click="clickSave()">确定</text>
				</view>
			</u--form>
		</view>
	</view>
</template>

<script>
	import qianziyuSelect from '@/components/qianziyu-select/qianziyu-select.vue'
	import * as api from '@/common/api/supervision.js'
	export default {
		components: {
			qianziyuSelect
		},
		data() {
			return {
				showSelect: false,
				showTime: false,
				showCheckSelect: false,
				formData: {
					rectifyObjId: "",
					rectifyObjName: "",
					rectifyInspDate: "",
					inspPerId: "", //检查人员id
					inspPerName: "", //检查人员name
					// patrolResult: "",
					rectifyEndDate: "",
					// sendDate: "",
					note: "",
					files: [],
					taskId: ""
				},
				aNum: 1,
				columnsCompany: [],
				companyList: [],

				nameList: [],
				columnsName: [],

				supervisionType: {
					Sid: "",
					type: '',
					inspStatus: ""
				},
			}
		},
		onLoad(option) {
			this.supervisionType = option
		},
		mounted() {
			// 详情查询
			if (this.supervisionType.type !== 'add') {
				api.default.getSupervisionDetail(this.supervisionType.Sid).then(res => {
					this.formData.rectifyObjId = res.data.data.ownerId
					this.formData.rectifyObjName = res.data.data.ownerName
					this.formData.rectifyInspDate = res.data.data.patrolTime
					res.data.data.patrolPers.forEach(item => {
						this.formData.inspPerName += item.perName + ','
						this.formData.inspPerId += item.perId + ','
					})
					this.formData.taskId = res.data.data.id
					// this.formData.sendDate = new Date().toLocaleDateString()
					// 去除末尾逗号
					this.formData.inspPerName = this.formData.inspPerName.substring(0, this.formData.inspPerName
						.lastIndexOf(
							','));
					this.formData.inspPerId = this.formData.inspPerId.substring(0, this.formData.inspPerId
						.lastIndexOf(
							','));
				})
			}

		},
		methods: {
			// 新增保存
			clickSave() {
				// 新增询查
				let reg = /\s+/g;
				if (this.formData.rectifyEndDate.length < 12) {
					this.formData.rectifyEndDate = this.formData.rectifyEndDate + '00:00:00'
				}
				this.formData.rectifyInspDate = this.formData.rectifyInspDate.replace(reg, '')
				api.default.getSupervisionIssueNotice(this.formData).then(res => {
					uni.showToast({
						title: '保存成功！',
						icon: 'success',
						duration: 2000
					})
					this.$goBack('./patrolName?index=1', 5)
				})
			},

			previewImage(val, index, type) {

				let photoList = this.formData.files.map(item => {
					return item.temp;
				});
				uni.previewImage({
					current: index, // 当前显示图片的索引值
					urls: photoList, // 需要预览的图片列表，photoList要求必须是数组
					loop: true, // 是否可循环预览
				})

			},

			// 点击选择图片
			selectFile(index) {
				if (this.formData.files.length == 9) {
					uni.showToast({
						title: "最多上传9个",
						icon: 'none'
					})
					return;
				}
				uni.chooseImage({
					count: (9 - this.formData.files.length),
					// sourceType: ['camera'], //这要注意，camera掉拍照，album是打开手机相册
					success: (chooseImageRes) => {
						uni.uploadFile({
							url: '/data-inspection-study/insp_file/upload',
							filePath: chooseImageRes.tempFilePaths[0],
							name: 'file',
							success: (uploadFileRes) => {
								const fileData = uploadFileRes.data ? JSON.parse(uploadFileRes
									.data) : ''
								console.log(3123, fileData)
								if (fileData && fileData.code == 200) {
									this.formData.files.push({
										id: fileData.data.id,
										url: chooseImageRes.tempFilePaths[0]
									})
									uni.showToast({
										title: '上传成功',
										icon: 'none'
									})
								}
							}
						});
					}
				});
			},

			// 删除已上传的图片
			fileDel(index, type) {
				this.formData.files.splice(index, 1)
			},


		},
	}
</script>

<style lang="scss" scoped>
	.file-list {
		flex: 1;

		.file-item {
			float: left;
			width: 22%;
			text-align: center;
			height: 140rpx;
			line-height: 140rpx;
			margin-right: 4%;
			margin-bottom: 2%;
			position: relative;

			.file-img {
				max-width: 100%;
				max-height: 100%;
				vertical-align: middle;
			}

			.file-del {
				position: absolute;
				right: 0;
				top: 0;
				transform: translate(30%, -30%);
				border-radius: 50%;
				width: 0;
				height: 0;
				border: 20rpx solid #f00;

				&::after {
					content: "";
					width: 20rpx;
					display: block;
					transform: translate(-50%, -50%);
					background-color: #ffffff;
					height: 4rpx;
				}
			}

			&:nth-child(4n) {
				margin-right: 0;
			}

			&:nth-child(n+5) {
				margin-top: calc(4% / 3);
			}

		}

		.file-upload-btn {
			box-sizing: border-box;
			border: 1px solid #ddd;
			background: url('/static/img/camera.png') no-repeat center;
			background-size: 70%;
		}
	}

	.add {
		width: 30%;
		margin: 10px;
		display: inline-block;
		text-align: center;
		padding: 15rpx 20rpx;
		border-radius: 10px;
		background-color: #1590EF;
		color: white;
	}
</style>
